<template>
  <div>
    <h1>可选链 断言使用场景</h1>
    <input type="text" ref="target" v-if="show">
    <button @click="show = !show">show/hide</button>
    <button @click="handleClick">click</button>
  </div>
</template>

<script setup lang="ts">
/**
 * input框 点击按钮 做聚焦
 */
import { ref } from 'vue';

const show = ref(true)
const target = ref<null | HTMLInputElement>(null)
const handleClick = () => {
  // 此刻input上没有v-if 所以input肯定不会没有，所以此时这里的断言不会有任何问题
  // 如果需求上input框有时候会被卸载掉，那此时你的断言就是有问题（你自己的决定判断失误了）
  // 类型断言一定要你确定没有问题，如果你逻辑上有漏洞，可能就会导致运行的时候就会报错
  // 上面的例子演示就是这样，input加了需求可以显示和隐藏，你断言肯定能拿到input元素就有问题
  // (target.value as HTMLInputElement).focus()
  target.value?.focus()
}
</script>

<style scoped>

</style>
